<template>
<!-- 佣金转入余额 -->
	<view class="content">
		<view class='commission-details'>
			<view class='promoterHeader bg-color f-header-box'>
				<view class='headerCon acea-row row-between-wrapper'>
					<view>
						<view class='name f12'>{{typeName}}</view>
						<view class='money'><text class='num'>{{(recordCount / 100).toFixed(2)}}</text>₹</view>
					</view>
					<view class="header-rt-img">
						<image src="/static/img/gold.png" mode="widthFix"></image>
					</view>
					<!-- <view class='iconfont icon-jinbi1'></view> -->
				</view>
			</view>
			<view class='sign-record'>
				<view class='list' v-for="(item,index) in recordList" :key="index">
					<view class='item'>
						<view class='data'>{{data}}</view>
						<view class='listn'>
							<view class='itemn acea-row row-between-wrapper'>
								<view>
									<view class='name line1'>{{item.operate_type}}</view>
									<view>{{item.create_time}}</view>
								</view>
								<view class='num' v-if="item.operate_type=='佣金分成'">+{{(item.operate_value / 100).toFixed(2)}}</view>
								<view class='num font-color' v-else>-{{(item.operate_value / 100).toFixed(2)}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class='loadingicon acea-row row-center-wrapper' v-if="recordList.length>0">
					<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
				</view>
				<view v-if="recordList.length == 0">
					<!-- 暂无转入记录 -->
					<emptyPage v-if="type == '佣金分成'" :title='i18n.user_page.commission_info.t6'></emptyPage>
					<emptyPage v-else :title='i18n.user_page.commission_info.t6'></emptyPage>
				</view>
			</view>
		</view>
		<!-- #ifdef MP -->
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
		<!-- #endif -->
		<home></home>
	</view>
</template>

<script>
	import {
		getSpreadInfo,
		getRecordApi,
		getCountApi
	} from '@/api/user.js';
	import {
		getCommissionInfo
	} from '@/api/commission.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import emptyPage from '@/components/emptyPage.vue'
	import home from '@/components/home';
	export default {
		components: {
			// #ifdef MP
			authorize,
			// #endif
			emptyPage,
			home
		},
		data() {
			return {
				typeName: '', // 佣金转入金额
				name: '',
				type: '',
				data: '',
				page: 1,
				limit: 10,
				recordList: [],
				recordCount: 0,
				status: false,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false ,//是否隐藏授权
				extractCount:0
			};
		},
		computed: {
			i18n() {
				return this.$t("index")
			},
			... mapGetters(['isLogin'])
		},
		onReady: function() {
			uni.setNavigationBarTitle({
				title: this.i18n.user_page.user_spread_money.t3
			});
		},
		onLoad(options) {
			if (this.isLogin) {
				this.type = options.type;
				if (this.type == '佣金转入余额') {
					this.typeName = this.i18n.user_page.commission_info.t4_1
				}
				if (this.type == '佣金分成') {
					this.typeName = this.i18n.user_page.commission_info.t2_1
				}
			} else {
				// #ifdef H5 || APP-PLUS
				toLogin();
				// #endif 
				// #ifdef MP
				this.isAuto = true;
				this.$set(this, 'isShowAuth', true)
				// #endif
			}
		},
		onShow: function() {
			uni.setNavigationBarTitle({
				title: this.i18n.user_page.user_spread_money.t3 // "佣金记录"
			});
			if(this.type == '佣金分成'){
				this.name = this.i18n.user_page.commission_info.t2; // '佣金分成总额';
				this.data = this.i18n.user_page.commission_info.t3; // '佣金转入'
				this.getCommissionList({type: this.type});
			} else if(this.type == '佣金转入余额') {
				this.name = this.i18n.user_page.commission_info.t4; // '佣金转入余额总额';
				this.data = this.i18n.user_page.commission_info.t5; // '佣金转出'
				this.getCommissionList({
					type: this.type
				});
			} else {
				uni.showToast({
					title: this.i18n.user_page.user_spread_money.t4, // '参数错误',
					icon: 'none',
					duration: 1000,
					mask: true,
					success: function(res) {
						setTimeout(function() {
							// #ifndef H5
							uni.navigateBack({
								delta: 1,
							});
							// #endif
							// #ifdef H5
							history.back();
							// #endif

						}, 1200)
					},
				});
			}
			
		},
		methods: {
			getCommissionList(data) {
				getCommissionInfo(data).then(res => {
					this.recordList = res.recordList;
					this.recordCount = res.recordCount;
					this.loading = false;
				})
			},
			// onLoadFun() {
			// 	this.getRecordList();
			// 	this.getRecordListCount();
			// },
			// // 授权关闭
			// authColse: function(e) {
			// 	this.isShowAuth = e
			// },
			// getList: function() {
			// 	let that = this;
			// 	let recordList = that.recordList;
			// 	let recordListNew = [];
			// 	if (that.status == true) return;
			// 	getRecordApi({
			// 		page: that.page,
			// 		limit: that.limit
			// 	}).then(res => {
			// 		let len = res.data.list.length;
			// 		let recordListData = res.data.list;
			// 		recordListNew = recordList.concat(recordListData);
			// 		that.status = that.limit > len;
			// 		that.page = that.page + 1;
			// 		that.$set(that, 'recordList', recordListNew);
			// 	});
			// },
			// getCount: function() {
			// 	let that = this;
			// 	if (status == true) return;
			// 	getCountApi({
			// 		page: that.page,
			// 		limit: that.limit
			// 	}).then(res => {
			// 		that.extractCount = res.data.count;
			// 	});
			// },
			// getRecordList: function() {
			// 	let that = this;
			// 	let page = that.page;
			// 	let limit = that.limit;
			// 	let status = that.status;
			// 	let recordList = that.recordList;
			// 	let recordListNew = [];
			// 	if (status == true) return;
			// 	getCommissionInfo({
			// 		page: page,
			// 		limit: limit
			// 	}).then(res => {
			// 		if(res.data.list){
			// 			let len = res.data.list.length;
			// 			let recordListData = res.data.list;
			// 			recordListNew = recordList.concat(recordListData);
			// 			that.status = limit > len;
			// 			that.page = page + 1;
			// 			that.$set(that, 'recordList', recordListNew);
			// 		}
			// 	});
			// },
			// getRecordListCount: function() {
			// 	let that = this;
			// 	getSpreadInfo().then(res => {
			// 		that.recordCount = res.data.commissionCount;
			// 		that.extractCount = res.data.extractCount;
			// 	});
			// }
		},
		onReachBottom: function() {
			this.getRecordList();
		}
	}
</script>

<style scoped lang="scss">
@import "@/common/font.css";
	.commission-details .promoterHeader .headerCon .money {
		font-size: 36rpx;
	}

	.commission-details .promoterHeader .headerCon .money .num {
		font-family: 'Guildford Pro';
	}
	.header-rt-img{
		width: 120upx;
	}
	.content{
		// padding-top: 10upx;
	}
</style>
